<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Trayek ver 1.0</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="A complete admin panel theme">
		<meta name="author" content="theemio">
		<link href="<?php echo base_url()?>webpage/css/utopia-white.css" rel="stylesheet">
		<link href="<?php echo base_url()?>webpage/css/utopia-responsive.css" rel="stylesheet">
		<link href="<?php echo base_url()?>webpage/css/ie.css" rel="stylesheet">
		<script type="text/javascript" src="<?php echo base_url()?>webpage/js/jquery.min.js"></script>
		<script type="text/javascript" src="<?php echo base_url()?>webpage/js/jquery.cookie.js"></script>
		<script type="text/javascript">
			if ($.cookie("css")) {
				$('link[href*="utopia-white.css"]').attr("href", $.cookie("css"));
				//$('link[href*="utopia-dark.css"]').attr("href", $.cookie("css"));
				//$('link[href*="utopia-wooden.css"]').attr("href", $.cookie("css"))
			}
			$(document).ready(function() {
				$(".theme-changer a").live("click", function() {
					$('link[href*="utopia-white.css"]').attr("href", $(this).attr("rel"));
					//$('link[href*="utopia-dark.css"]').attr("href", $(this).attr("rel"));
					//$('link[href*="utopia-wooden.css"]').attr("href", $(this).attr("rel"));
					$.cookie("css", $(this).attr("rel"), {
						expires : 365,
						path : "/"
					});
					$(".user-info").removeClass("user-active");
					$(".user-dropbox").hide()
				})
			});
		</script><!--[if IE 8]><link href="css/ie8.css" rel="stylesheet"><![endif]--><!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
	</head>
	<body>
		<div class="container-fluid">
			<div class="row-fluid">
				<div class="span12">
					<div class="header-top">
						<div class="header-wrapper">
							<a href="#" class="utopia-logo"><img src="<?php echo base_url()?>webpage/img/utopia-logo.png" alt="Utopia"></a>
							<div class="header-right">
								<div class="header-divider">
									&nbsp;
								</div>
								<div class="search-panel header-divider">
									<div class="search-box"><img src="<?php echo base_url()?>webpage/img/icons/zoom.png" alt="Search">
										<form action="" method="post">
											<input type="text" name="search" placeholder="search"/>
										</form>
									</div>
								</div>
								<div class="notification header-divider">
									<div class="notification-wrapper">
										<a href="#" class="notification-counter">8</a><div id="triangle-down"></div>
										<div class="tabbable notification-box">
											<ul class="nav nav-tabs">
												<li class="active">
													<a data-toggle="tab" href="#message">Messages (3)</a>
												</li>
												<li class="">
													<a data-toggle="tab" href="#activity">Activity (5)</a>
												</li>
											</ul>
											<div class="tab-content">
												<div id="message" class="tab-pane active">
													<ul class="message-list">
														<li class="message new">
															<div class="msg">
																From: <a href="">Benjamiin Buttons</a><span>40m ago</span><a class="subject" href="">Getting Started on Starlight Template</a>
																<p>
																	Vitae dicta sunt explicabo. Nemo enim
																</p>
															</div>
														</li>
														<li class="message new">
															<div class="msg">
																From: <a href="">ThemePixels Team</a><span>2 hours ago</span><a class="subject" href="">Thank you for using StarLight Template</a>
																<p>
																	Hi,Eiusmod tempor incididunt ut labore et dolore magna aliqua.
																</p>
															</div>
														</li>
														<li class="message">
															<div class="msg">
																From: <a href="">Katherine Kate</a><span>40m ago</span>
																<p>
																	Lorem ipsum dolor sit amet...
																</p>
															</div>
														</li>
														<li class="message">
															<div class="msg">
																From: <a href="">ThemePixels Team</a><span>Yesterday</span><a class="subject" href="">Events for the next month</a>
																<p>
																	Hi,Eiusmod tempor incididunt ut labore et dolore magna aliqua.
																</p>
															</div>
														</li>
													</ul>
													<div class="message-more">
														<a href="">See All Messages</a>
													</div>
												</div>
												<div id="activity" class="tab-pane">
													<ul class="message-list">
														<li class="user new">
															<div class="msg">
																<a href="">Justin Meller</a> added <a href="">John Doe</a> as Admin.
															</div>
														</li>
														<li class="call new">
															<div class="msg">
																You missed a call from <a href="">Porfirio</a>
															</div>
														</li>
														<li class="calendar new">
															<div class="msg">
																<a href="">Katherine Kate</a> invited you in an event <a href="">Rock Party</a>.
															</div>
														</li>
														<li class="settings">
															<div class="msg">
																<a href="">Jane Doe</a> updated her profile.
															</div>
														</li>
														<li class="follow">
															<div class="msg">
																<a href="">Jet Lee</a> is now following you.
															</div>
														</li>
													</ul>
													<div class="message-more">
														<a href="">View All Activities</a>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="user-panel header-divider">
									<div class="user-info"><img src="<?php echo base_url()?>webpage/img/icons/user.png" alt=""><a href="#">Admin user</a>
									</div>
									<div class="user-dropbox">
										<ul>
											<li class="user">
												<a href="">Profile</a>
											</li>
											<li class="settings">
												<a href="">Account Settings</a>
											</li>
											<li class="theme-changer dark-theme">
												<a href="javascript:void(0)" class="dark" rel="<?php echo base_url()?>webpage/css/themes/utopia-dark.css">Dark theme</a>
											</li>
											<li class="theme-changer white-theme">
												<a href="javascript:void(0)" class="white" rel="<?php echo base_url()?>webpage/css/utopia-white.css">White theme</a>
											</li>
											<li class="theme-changer wooden-theme">
												<a href="javascript:void(0)" class="wooden" rel="<?php echo base_url()?>webpage/css/themes/utopia-wooden.css">Wooden theme</a>
											</li>
											<li class="logout">
												<a href="index.html">Logout</a>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row-fluid">
				<div class="span2 sidebar-container">
					<div class="sidebar">
						<div class="navbar sidebar-toggle">
							<div class="container">
								<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a>
							</div>
						</div>
						<div class="nav-collapse collapse leftmenu">
							<ul>
								<li>
									<a class="dashboard smronju" href="dashboard.html" title="Dashboard"><span>Dashboard</span></a>
								</li>
								<li>
									<a class="list" href="javascript:void(0)" title="Tables"><span>Tables</span></a>
									<ul class="dropdown">
										<li>
											<a class="tables" href="tables.html" title="Tables"><span>Tables</span></a>
										<li>
											<a class="widgets smronju" href="pricingtables.html" title="Pricing Tables"><span>Pricingtables</span></a>
										</li>
									</ul>
								</li>
								<li>
									<a class="tables" href="typography.html" title="Typography"><span>Typography</span></a>
								</li>
								<li class="current">
									<a class="elements" href="maps.html" title="Maps"><span>Maps</span></a>
								</li>
								<li>
									<a class="charts" href="charts.html" title="Graphs &amp; Charts"><span>Charts</span></a>
								</li>
								<li>
									<a class="barcode" href="barcode.html" title="Barcode"><span>Barcode</span></a>
								</li>
								<li>
									<a class="editor" href="javascript:void(0)" title="Forms"><span>Forms</span></a>
									<ul class="dropdown">
										<li>
											<a class="simple smronju" href="forms.html" title="Form Elements"><span>Form Element</span></a>
										</li>
										<li>
											<a class="wizard-form smronju" href="wizard_form.html" title="Wizard Form"><span>Wizard Form</span></a>
										</li>
									</ul>
								</li>
								<li>
									<a class="gallery" href="javascript:void(0)" title="Galleries"><span>Galleries</span></a>
									<ul class="dropdown">
										<li>
											<a class="fluidgallery" href="fluid_galleries.html" title="Fluid Gallery"><span>Fluid Gallery</span></a>
										</li>
										<li>
											<a class="slidergallery" href="mixed_galleries.html" title="Mixed Gallery"><span>Mixed Gallery</span></a>
										</li>
										<li>
											<a class="videogallery" href="video_galleries.html" title="Video Gallery"><span>Video Gallery</span></a>
										</li>
									</ul>
								</li>
								<li>
									<a class="grid" href="grid.html" title="Grid"><span>Grid</span></a>
								</li>
								<li>
									<a class="calendar" href="calendar.html" title="Calendar"><span>Calendar</span></a>
								</li>
								<li>
									<a class="icons" href="icons.html" title="Icons"><span> Icons</span></a>
								</li>
								<li>
									<a class="chat" href="conversation.html" title="Conversation"><span>Conversation</span></a>
								</li>
								<li>
									<a class="error" href="error.html" title="Error Page"><span>Error Page</span></a>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="span10 body-container">
					<div class="row-fluid">
						<div class="span12">
							<ul class="breadcrumb">
								<li>
									<a href="#">Home</a><span class="divider">/</span>
								</li>
								<li>
									<a href="#">Maps</a><span class="divider">/</span>
								</li>
							</ul>
						</div>
					</div>
					<div class="row-fluid">
						<div class="span12">
							<section class="utopia-widget">
								<div class="utopia-widget-title"><img src="<?php echo base_url()?>webpage/img/icons/satellite.png" class="utopia-widget-icon"><span>basic map with marker</span>
								</div>
								<div class="utopia-widget-content">
									<div class="utopia-map-wrapper">
										<div id="utopia-google-map-1" class="utopia-map"></div>
										<div class="utopia-map-details">
											<div class="utopia-map-description">
												<p>
													Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et tempus elit. Duis pharetra blandit risus, a condimentum ipsum ultricies nec. Integer accumsan neque nec augue dictum sit amet dignissim tortor scelerisque.
												</p>
											</div>
											<div class="utopia-map-action"><img src="<?php echo base_url()?>webpage/img/icons2/sun.png"/><img src="<?php echo base_url()?>webpage/img/icons2/world.png"/><img src="<?php echo base_url()?>webpage/img/icons2/cloud.png"/>
											</div><div class="clearfix"></div>
										</div>
									</div>
								</div>
							</section>
						</div>
					</div>
					<div class="row-fluid">
						<div class="span12">
							<section class="utopia-widget">
								<div class="utopia-widget-title"><img src="<?php echo base_url()?>webpage/img/icons/satellite.png" class="utopia-widget-icon"><span>maps with multipe markers</span>
								</div>
								<div class="utopia-widget-content">
									<div class="utopia-map-wrapper">
										<div id="utopia-google-map-2" class="utopia-map"></div>
										<div class="utopia-map-details">
											<div class="utopia-map-description">
												<p>
													Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et tempus elit. Duis pharetra blandit risus, a condimentum ipsum ultricies nec. Integer accumsan neque nec augue dictum sit amet dignissim tortor scelerisque.
												</p>
											</div>
											<div class="utopia-map-action"><img src="<?php echo base_url()?>webpage/img/icons2/sun.png"/><img src="<?php echo base_url()?>webpage/img/icons2/world.png"/><img src="<?php echo base_url()?>webpage/img/icons2/cloud.png"/>
											</div><div class="clearfix"></div>
										</div>
									</div>
								</div>
							</section>
						</div>
					</div>
					<div class="row-fluid">
						<div class="span12">
							<section class="utopia-widget">
								<div class="utopia-widget-title"><img src="<?php echo base_url()?>webpage/img/icons/satellite.png" class="utopia-widget-icon"><span>maps with traffic layer</span>
								</div>
								<div class="utopia-widget-content">
									<div class="utopia-map-wrapper">
										<div id="utopia-google-map-3" class="utopia-map"></div>
										<div class="utopia-map-details">
											<div class="utopia-map-description">
												<p>
													Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et tempus elit. Duis pharetra blandit risus, a condimentum ipsum ultricies nec. Integer accumsan neque nec augue dictum sit amet dignissim tortor scelerisque.
												</p>
											</div>
											<div class="utopia-map-action"><img src="<?php echo base_url()?>webpage/img/icons2/sun.png"/><img src="<?php echo base_url()?>webpage/img/icons2/world.png"/><img src="<?php echo base_url()?>webpage/img/icons2/cloud.png"/>
											</div><div class="clearfix"></div>
										</div>
									</div>
								</div>
							</section>
						</div>
					</div>
					<div class="row-fluid">
						<div class="span12">
							<section class="utopia-widget">
								<div class="utopia-widget-title"><img src="<?php echo base_url()?>webpage/img/icons/satellite.png" class="utopia-widget-icon"><span>maps with polygons</span>
								</div>
								<div class="utopia-widget-content">
									<div class="utopia-map-wrapper">
										<div id="utopia-google-map-4" class="utopia-map"></div>
										<div class="utopia-map-details">
											<div class="utopia-map-description">
												<p>
													Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et tempus elit. Duis pharetra blandit risus, a condimentum ipsum ultricies nec. Integer accumsan neque nec augue dictum sit amet dignissim tortor scelerisque.
												</p>
											</div>
											<div class="utopia-map-action"><img src="<?php echo base_url()?>webpage/img/icons2/sun.png"/><img src="<?php echo base_url()?>webpage/img/icons2/world.png"/><img src="<?php echo base_url()?>webpage/img/icons2/cloud.png"/>
											</div><div class="clearfix"></div>
										</div>
									</div>
								</div>
							</section>
						</div>
					</div>
					<div class="row-fluid">
						<div class="span12">
							<section class="utopia-widget">
								<div class="utopia-widget-title"><img src="<?php echo base_url()?>webpage/img/icons/satellite.png" class="utopia-widget-icon"><span>maps with route directions</span>
								</div>
								<div class="utopia-widget-content">
									<div class="utopia-map-wrapper">
										<div id="utopia-google-map-5" class="utopia-map"></div>
										<div class="utopia-map-details">
											<div class="utopia-map-description">
												<p>
													Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et tempus elit. Duis pharetra blandit risus, a condimentum ipsum ultricies nec. Integer accumsan neque nec augue dictum sit amet dignissim tortor scelerisque.
												</p>
											</div>
											<div class="utopia-map-action"><img src="<?php echo base_url()?>webpage/img/icons2/sun.png"/><img src="<?php echo base_url()?>webpage/img/icons2/world.png"/><img src="<?php echo base_url()?>webpage/img/icons2/cloud.png"/>
											</div><div class="clearfix"></div>
										</div>
									</div>
								</div>
							</section>
						</div>
					</div>
					<div class="row-fluid">
						<div class="span12">
							<section class="utopia-widget">
								<div class="utopia-widget-title"><img src="<?php echo base_url()?>webpage/img/icons/satellite.png" class="utopia-widget-icon"><span>maps with bicycle layer</span>
								</div>
								<div class="utopia-widget-content">
									<div class="utopia-map-wrapper">
										<div id="utopia-google-map-6" class="utopia-map"></div>
										<div class="utopia-map-details">
											<div class="utopia-map-description">
												<p>
													Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et tempus elit. Duis pharetra blandit risus, a condimentum ipsum ultricies nec. Integer accumsan neque nec augue dictum sit amet dignissim tortor scelerisque.
												</p>
											</div>
											<div class="utopia-map-action"><img src="<?php echo base_url()?>webpage/img/icons2/sun.png"/><img src="<?php echo base_url()?>webpage/img/icons2/world.png"/><img src="<?php echo base_url()?>webpage/img/icons2/cloud.png"/>
											</div><div class="clearfix"></div>
										</div>
									</div>
								</div>
							</section>
						</div>
					</div>
				</div>
			</div>
		</div><script type="text/javascript" src="<?php echo base_url()?>webpage/js/utopia.js"></script><script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAeTbCOpuPIKT4i9n8iUQsBHNUt_MWjtog&sensor=false"></script>
		<script type="text/javascript" src="<?php echo base_url()?>webpage/js/gmap3.js"></script><script type="text/javascript" src="<?php echo base_url()?>webpage/js/header.js?v1"></script>
		<script type="text/javascript" src="<?php echo base_url()?>webpage/js/sidebar.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("#utopia-google-map-1").gmap3({
					action : "addMarker",
					address : "place de l'étoile, Paris",
					map : {
						center : true,
						zoom : 14
					},
					marker : {
						options : {
							draggable : false
						}
					},
					infowindow : {
						options : {
							content : "Welcome to Paris!"
						}
					}
				});
				$("#utopia-google-map-2").gmap3({
					action : "init",
					options : {
						center : [46.578498, 2.457275],
						zoom : 5
					}
				}, {
					action : "addMarker",
					latLng : [48.8620722, 2.352047]
				}, {
					action : "addMarker",
					latLng : [46.59433, 0.342236]
				}, {
					action : "addMarker",
					latLng : [42.704931, 2.894697]
				});
				$("#utopia-google-map-3").gmap3({
					action : "init",
					mapTypeId : google.maps.MapTypeId.ROADMAP,
					center : [34.04924594193164, -118.24104309082031],
					zoom : 13
				}, {
					action : "addTrafficLayer"
				});
				$("#utopia-google-map-4").gmap3({
					action : "init",
					center : [24.886436490787712, -70.2685546875],
					zoom : 3,
					mapTypeId : google.maps.MapTypeId.TERRAIN
				}, {
					action : "addPolygon",
					options : {
						strokeColor : "#FF0000",
						strokeOpacity : 0.8,
						strokeWeight : 2,
						fillColor : "#FF0000",
						fillOpacity : 0.35
					},
					paths : [[25.774252, -80.190262], [18.466465, -66.118292], [32.321384, -64.75737], [25.774252, -80.190262]]
				});
				$("#utopia-google-map-5").gmap3({
					action : "getRoute",
					options : {
						origin : "48 Pirrama Road, Pyrmont NSW",
						destination : "Bondi Beach, NSW",
						travelMode : google.maps.DirectionsTravelMode.DRIVING
					},
					callback : function(a) {
						if (!a) {
							return
						}
						$(this).gmap3({
							action : "init",
							zoom : 13,
							mapTypeId : google.maps.MapTypeId.ROADMAP,
							streetViewControl : true,
							center : [-33.879, 151.235]
						}, {
							action : "addDirectionsRenderer",
							options : {
								preserveViewport : true,
								draggable : false,
								directions : a
							}
						})
					}
				});
				$("#test5").gmap3("addBicyclingLayer");
				$("#test").gmap3({
					action : "init",
					mapTypeId : google.maps.MapTypeId.ROADMAP,
					center : [42.3726399, -71.1096528],
					zoom : 14
				}, "addBicyclingLayer");
				$("#utopia-google-map-6").gmap3({
					action : "init",
					mapTypeId : google.maps.MapTypeId.ROADMAP,
					center : [42.3726399, -71.1096528],
					zoom : 14
				}, {
					action : "addBicyclingLayer"
				})
			});
		</script>
	</body>
</html>